<template>
  <div class="dashboard">
    <!-- 第一行：6 个指标卡片 -->
    <!-- 第一行：6 个纯数字卡片 -->
    <el-row :gutter="16" class="row-1">
      <el-col :span="4" v-for="(c, i) in cards" :key="i">
        <el-card shadow="hover" body-style="padding:16px;text-align:center">
          <div class="card-title">{{ c.title }}</div>
          <div class="card-value">{{ c.value }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：3 个大图 -->
    <el-row :gutter="16" class="row-2">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>用车类型分布</span>
          </div>
          <div ref="pie" class="big-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>月度趋势</span>
          </div>
          <div ref="line" class="big-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>司机出勤率</span>
          </div>
          <div ref="gauge" class="big-chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行：2 个表格 -->
    <el-row :gutter="16" class="row-3">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>车辆状态</span>
          </div>
          <el-table :data="carStatus" size="small" stripe>
            <el-table-column prop="name" label="状态">
              <template slot-scope="s">
                <span v-if="s.row.name === 0">空闲</span>
                <span v-if="s.row.name === 1">出车中</span>
                <span v-if="s.row.name === 2">维修中</span>
              </template>
            </el-table-column>

            <el-table-column prop="num" label="数量" width="70" />
            <el-table-column prop="rate" label="占比" width="90">
              <template slot-scope="s">{{ s.row.rate }}%</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>司机本月之星</span>
          </div>
          <el-table :data="topDrivers" size="small" stripe>
            <el-table-column prop="driverId" label="司机ID" />
            <el-table-column prop="driverName" label="司机名称" />
            <el-table-column prop="orderNumber" label="完成单" width="80" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dashboardApi from "@/api/dashboard";

export default {
  name: "Dashboard",
  data() {
    return {
      cards: [],
      carStatus: [],
      topDrivers: [],
      pieData: [],
      lineData: { month: [], apply: [], complete: [] },
      attendanceRate: 0,

      /* 把 chart 实例存下来，方便后面 setOption */
      pieChart: null,
      lineChart: null,
      gaugeChart: null,
    };
  },

  mounted() {
    /* 先只初始化空图表，保证 DOM 已经渲染 */
    this.pieChart = echarts.init(this.$refs.pie);
    this.lineChart = echarts.init(this.$refs.line);
    this.gaugeChart = echarts.init(this.$refs.gauge);

    /* 拉数据 -> 填充 -> 重新 setOption */
    this.initData();
  },

  methods: {
    /* 拉取后端数据 */
    initData() {
      dashboardApi.init().then((res) => {
        const d = res.data;

        /* 1. 卡片、表格、占比 */
        this.cards = d.cards;
        this.carStatus = d.carStatus;
        this.topDrivers = d.topDrivers;
        this.attendanceRate = d.attendanceRate;

        /* 2. 饼图数据 */
        this.pieData = d.statusDist;
        this.updatePie();

        /* 3. 折线图数据 */
        this.lineData.month = [];
        this.lineData.apply = [];
        this.lineData.complete = [];
        d.monthTrend.forEach((item) => {
          this.lineData.month.push(item.month);
          this.lineData.apply.push(item.applyCount); // 后端字段
          this.lineData.complete.push(item.completeCount);
        });
        this.updateLine();

        /* 4. 仪表盘 */
        this.updateGauge();
      });
    },

    /* 饼图 */
    updatePie() {
      this.pieChart.setOption({
        tooltip: { trigger: "item", formatter: "{b}: {c} 单 ({d}%)" },
        legend: { orient: "vertical", right: "5%", top: "center" },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["40%", "50%"],
            data: this.pieData,
            itemStyle: { borderRadius: 4, borderColor: "#fff", borderWidth: 2 },
            label: { show: true, formatter: "{d}%" },
          },
        ],
      });
    },

    /* 折线图 */
    updateLine() {
      this.lineChart.setOption({
        tooltip: { trigger: "axis" },
        xAxis: { type: "category", data: this.lineData.month },
        yAxis: { type: "value", name: "单数" },
        series: [
          {
            name: "申请",
            type: "line",
            data: this.lineData.apply,
            smooth: true,
            lineStyle: { width: 3 },
          },
          {
            name: "完成",
            type: "line",
            data: this.lineData.complete,
            smooth: true,
            lineStyle: { width: 3 },
          },
        ],
      });
    },

    /* 仪表盘 */
    updateGauge() {
      this.gaugeChart.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: "90%",
            center: ["50%", "70%"],
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.3, "#fd666d"],
                  [0.7, "#37a2da"],
                  [1, "#67e0e3"],
                ],
              },
            },
            pointer: { width: 6, length: "80%" },
            detail: {
              fontSize: 24,
              offsetCenter: [0, "-10%"],
              formatter: "{value}%",
            },
            data: [{ value: this.attendanceRate, name: "司机出勤率" }],
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.dashboard {
  padding: 16px;
  background: #f2f3f5;
}
.row-1 .el-card {
  margin-bottom: 16px;
}
.card-title {
  font-size: 14px;
  color: #909399;
}
.card-value {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  margin-top: 8px;
}
.card-trend {
  font-size: 13px;
  color: #909399;
}
.row-2,
.row-3 {
  margin-top: 16px;
}
.big-chart {
  height: 400px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
